<div class="container-fluid">
  <div class="body" id="top">
    <div class="container">
      <div class="py-5 text-center">
        <img class="d-block mx-auto mb-4" src="../../../assets/icons/candlesticks.png" alt="" width="72" height="72">
        <h2>Mean Reversion</h2>
        <h4>Class: Advanced Algorithm</h4>
        <p class="lead">Every 20 days at market open, filter out only the top 1% of stocks by Average Dollar Volume.
        If the price of any of these stocks is below the Lower Bollinger Band, buy a set number of shares.
        If the price is above the Upper Bollinger Band, sell a set number of shares.</p>
      </div>
      <mat-vertical-stepper [linear]="false" #stepper>
        <mat-step [stepControl]="firstForm">
          <form [formGroup]="firstForm">
            <ng-template matStepLabel>Basic Configuration</ng-template>

            <div class="row">
              <div class="col-md-4 mb-3">
                <mat-form-field>
                  <input matInput [matDatepicker]="picker1" placeholder="Simulation Start"
                         [formControl]="startDate">
                  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                  <mat-datepicker #picker1></mat-datepicker>
                </mat-form-field>
              </div>
              <div class="col-md-4 mb-3">
                <mat-form-field>
                  <input matInput [matDatepicker]="picker2" placeholder="Simulation End"
                         [formControl]="endDate">
                  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                  <mat-datepicker #picker2></mat-datepicker>
                </mat-form-field>
              </div>
              <div class="col-md-4 mb-3">
                <mat-form-field>
                  <mat-icon matPrefix>attach_money</mat-icon>
                  <input matInput type="number" placeholder="Initial Capital Base"
                         [value]="capitalBase" [(ngModel)]="capitalBase" [ngModelOptions]="{standalone: true}">
                </mat-form-field>
              </div>
            </div>
          </form>
        </mat-step>
        <mat-step [stepControl]="secondForm">
          <form [formGroup]="secondForm">
            <ng-template matStepLabel>How Many Shares to Trade Per Transaction</ng-template>

            <div class="row">
              <div class="col-md-6 mb-3">
                <mat-form-field>
                  <input matInput type="number" placeholder="# of Shares To Trade"
                         [value]="numOfShares" [(ngModel)]="numOfShares" [ngModelOptions]="{standalone: true}">
                </mat-form-field>
              </div>
            </div>
          </form>
        </mat-step>
        <mat-step [stepControl]="thirdForm">
          <form [formGroup]="thirdForm">
            <ng-template matStepLabel>Done</ng-template>

            <div class="row">
              <div class="col-md-6 mb-3" *ngIf="!beginSim; else reset;">
                <button mat-button (click)="onDoneClick()">Begin Trading</button>
              </div>

              <ng-template #reset>
                <div class="col-md-6 mb-3">
                  <button mat-button (click)="onResetClick()">Reset</button>
                </div>
              </ng-template>

            </div>
          </form>
        </mat-step>
      </mat-vertical-stepper>
    </div>
  </div>
  <div id="results">
    <ng-container *ngIf="beginSim">
      <div class="body">
        <app-graph [type]="'mean-rev'"
                   [start]="getDate(startDate)"
                   [end]="getDate(endDate)"
                   [capitalBase]="capitalBase"
                   [numberOfShares]="numOfShares"></app-graph>
      </div>
    </ng-container>
  </div>
</div>
